<template>
  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 m-fee-add" >
    <div class="widget am-cf">
      <div class="widget-head am-cf">
        <div class="widget-title am-fl">添加大类</div>
        <div class="widget-function am-fr">
          <button type="button" class="am-btn am-btn-default" @click="$router.go(-1)">返回</button>
        </div>
      </div>
      <div class="widget-body am-fr">
        <el-form class="tpl-form-border-form tpl-form-border-br" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px">
          <el-form-item class="list-item am-form-group" required  prop="areaTeamId" label="请选择区域">
            <el-select size="small" v-model="ruleForm.areaTeamId" placeholder="">
              <el-option
                v-for="item in areaTeams"
                :key="item.areaTeamId"
                :label="item.name"
                :value="item.areaTeamId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="list-item am-form-group" required prop="categoryName" label="来源大类名称">
            <el-input v-model="ruleForm.categoryName" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div class="am-form-group" style="text-align: center">
          <button type="button" size="big" class="am-btn am-btn-primary" @click="handleSave">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import io from '../../lib/io'
  import moment from 'moment'

  export default{
    components: {},
    data(){
      return{
        ruleForm: {
          areaTeamId: '',
          categoryName: ''
        },
        rules: {
          categoryName: [
            { required: true, message: '请输入来源大类名称', trigger: 'blur' }
          ],
          areaTeamId: [
            { required: true, message: '请选择区域', trigger: 'change' }
          ],
        }
      }
    },
    created:function(){
      let info = this.$route.query.info
      let areaTeamId = this.$route.query.areaTeamId
      if (info) {
        info = JSON.parse(info)
        this.ruleForm.areaTeamId = info.areaTeamId
        this.ruleForm.categoryName = info.categoryName
        this.ruleForm.categoryId = info.categoryId
      }
      if (areaTeamId) {
        this.ruleForm.areaTeamId = areaTeamId
      }
    },
    computed: {
      areaTeams: function () {
        return this.$root.config.areaTeams || []
      },
    },

    methods:{
      handleSave () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            io.post(io.saveOrUpdateBigFromCategory, {
              areaTeamId: this.ruleForm.areaTeamId,
              categoryName: this.ruleForm.categoryName,
              categoryId: this.ruleForm.categoryId || '',
            }, (ret) => {
              if (ret.success) {
                this.$toast('保存成功！')
                this.$router.go(-1)
              } else {
                this.$alert(ret.desc)
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    }
  }
</script>

<style lang="less">
  .m-fee-add {
    .am-form-success label {
      color: #666;
    }
    .el-checkbox-group {
      .el-checkbox:first-child {
        margin-left: 15px;
      }
    }
  }
</style>
